<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务清单</title>
    <link rel="stylesheet" href="css/iconfonts/iconfont.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/homeWork6.css">
    <link rel="stylesheet" href="css/homeWork6_1.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="root">
        <div class="Box">
            <!-- 左边部分 -->
            <div class="left">
                <div class="leftTop">
                    <h1>{{title}}</h1>
                </div>
                <!-- 轮播展示 -->
                <div class="showImg" >
                    <!-- 轮播图片 -->
                    <img  @mouseover="changeInterval(true)" 
                         @mouseleave="changeInterval(false)"  
                         v-for="(item) in imgArr" 
                         :key="item.id"
                         :src="item.url" 
                         alt="暂无图片" 
                         v-show="item.id===currentIndex" 
                         >
                    <!-- 左侧按钮 -->
                    <div  @click="clickIcon('up')"   class="iconDiv icon-left"> 
                        <i class="iconfont icon-shangyiye"></i>
                    </div>
                    <!-- 右侧按钮 -->
                    <div  @click="clickIcon('down')"  class="iconDiv icon-right">
                        <i class="iconfont icon-xiayiye"></i>
                    </div>
                    <!-- 控制圆点 -->
                    <div class="banner-circle">
                        <ul>
                            <li @click="changeImg(item.id)" 
                                v-for="(item) in imgArr" 
                                :key="item.id"
                                :class="item.id===currentIndex? 'active': '' "
                             ></li>
                        </ul>
                    </div>
                </div>                
                <!-- 轮播展示 end-->
            </div>
            <!-- 左边部分 -->
            <!-- 右边部分 任务清单-->
            <div class="right">
                <!-- 头部 -->
                <div class="rightTop">
                    <h2>My Task</h2>
                </div>
                <!-- 计划部分 -->
                <div class="task">
                    <div class="myTask plan">
                        <i class="iconfont icon-jia" @click="handleBtn"></i>
                        <a href="#" @click="myPlan">我的计划</a>
                    </div>
                    <div class="myTask">
                        <a href="#" @click="complete">已完成：<strong>{{Finnish}}</strong></a>
                    </div>
                    <div class="myTask">
                        <a href="#" @click="undone">未完成：<strong>{{count}}</strong></a>
                    </div>
                </div>
                <!-- 添加计划 -->
                <!-- <plan></plan> -->
                <section class="main" v-if="showPlan">
                    <div class="selectAll">
                        <input type="checkbox" class="select" v-model="isAll"/>
					    <p class="all">全选</p>
                    </div>
                    
                    <ul class="todo-list">
                        <!-- 任务列表 -->
                        <li v-for="(item, index) in list" :key="item.id">
                          <div class="view">
                            <!-- 双向绑定 flag -->
                            <input class="toggle" type="checkbox" v-model="item.flag" />
                            <label>{{ item.name }}</label>
                            <!-- 删除按钮 -->
                            <button class="destroy" @click="del(index)"></button>
                          </div>
                        </li>
                    </ul>
                </section>
                <!-- 已完成 -->
                <section class="main" v-if="showFinish">
                    <div class="selectAll">
                        <input type="checkbox" class="select" v-model="isAll"/>
                        <p class="all">全选</p>
                    </div>
                    
                    <ul class="todo-list">
                        <!-- 任务列表 -->
                        <li v-for="(item, index) in dolist" :key="item.id">
                          <div class="view">
                            <!-- 双向绑定 flag -->
                            <input class="toggle" type="checkbox" v-model="item.flag" />
                            <label>{{ item.name }}</label>
                            <!-- 删除按钮 -->
                            <button class="destroy" @click="del(index)"></button>
                          </div>
                        </li>
                    </ul>
                </section>
                <!-- 未完成 -->
                <section class="main" v-if="showNoFinish">
                    <div class="selectAll">
                        <input type="checkbox" class="select" v-model="isAll"/>
                        <p class="all">全选</p>
                    </div>
                    
                    <ul class="todo-list">
                        <!-- 任务列表 -->
                        <li v-for="(item, index) in undolist" :key="item.id">
                          <div class="view">
                            <!-- 双向绑定 flag -->
                            <input class="toggle" type="checkbox" v-model="item.flag" />
                            <label>{{ item.name }}</label>
                            <!-- 删除按钮 -->
                            <button class="destroy" @click="del(index)"></button>
                          </div>
                        </li>
                    </ul>
                </section>
            </div>
            <!-- 弹窗 -->
            <div class="mask" v-show="showWindow">
                <input class="new-todo" placeholder="请输入要完成的任务" autofocus v-model="curTask" @keyup.enter="add"/>
                <i class="iconfont icon-cuowu" @click="stopBtn"></i>
            </div>
            <!-- 弹窗 end-->
            <!-- 右边部分 任务清单 end-->
        </div>
    </div>
    <script src="js/homeWork6.js"></script>
</body>
</html>